<template>
  <div class="charts"
    style="color: #000; width: 100%; height: 100%;">
    <div ref="pieChart"
      style="height:100%;"></div>
  </div>
</template>
<script>
// 分配饼图:参考地址 http://gallery.echartsjs.com/editor.html?c=xBJ06lIMUQ
// const echarts = resolve => require(['echarts'], resolve) // 请使用懒加载
import echarts from 'echarts'
import { on, off } from '@/utils/util';
export default {
  data () {
    return {
      myChart: null
    };
  },
  props: {
    legendData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    // 图表标题
    chartTitle: {
      type: String,
      default: ''
    },
    // 提示弹窗的formatter
    tooltipFormatter: {
      type: String,
      default: null
    },
    legendFormatter: {
      type: String,
      default: null
    },
    seriesData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    radius: {
      default: '55%'
    },
    legendRight: {
      type: String,
      default: '6'
    },
    legendtop: {
      type: String,
      default: '10%'
    },
    center: {
      type: Array,
      default: ['30%', '50%']
    }
  },
  watch: {
    seriesData () {
      this.againCanvas();
    }
  },
  computed: {
    option () {
      let seriesArr = []
      let seriesItem = {
        name: '',
        type: 'pie',
        radius: ['40%', '60%'],
        center: this.center,
        data: [],
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        animationEasing: 'cubicInOut',
        animationDuration: 1500
      }

      this.seriesData.forEach((e, idx) => {
        let item = JSON.parse(JSON.stringify(seriesItem))
        item.name = e.name || ''
        item.type = e.type || item.type
        item.data = e.data
        item.animationDuration = e.animationDuration || item.animationDuration
        seriesArr.push(item)
      })
      return {
        color: ['#88C7FF', '#FED500', '#23CBAB', '#0076FF', '#C4EBAD', '#96DEE8', '#FAD860', '#CBB0E3', '#3D52A8', '#EDAFDA', '#8D98B3', '#D0648A', '#A5E7F0', '#FE8463', '#27727B', '#B8D2C7', '#61A0A8', '#85FAF1', '#87071DE'],
        title: {
          text: this.chartTitle,
          subtext: '',
          left: 'left',
          textStyle: {
            color: '#464646',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: this.tooltipFormatter,
          textStyle: {
            align: 'left'
          },
          formatter: '{b}'
        },
        legend: {
          top: this.legendtop,
          right: this.legendRight,
          icon: 'circle',
          orient: 'vertical',
          itemWidth: 10,
          itemHieght: 10,
          formatter: this.legendFormatter,
          textStyle: {
            color: '#8B96A6'
          }
        },
        series: seriesArr
      }
    }
  },
  methods: {
    // 重新画图
    againCanvas () {
      // this.myChart.clear();
      this.myChart.setOption(this.option, true);
      this.myChart.resize();
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.myChart = echarts.init(this.$refs['pieChart']);
      this.myChart.setOption(this.option);
      // 大饼图点击事件
      this.myChart.on('click', params => {
        this.$emit('bigPieClickFn', params)
      });
      on(window, 'resize', this.againCanvas);
    })

    // this.myChart.getZr().on('click', params => {
    //   let pointInPixel = [params.offsetX, params.offsetY]
    //   if (this.myChart.containPixel('grid', pointInPixel)) {
    //     let xIndex = this.myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
    //     let options = this.myChart.getOption()
    //     this.$emit('barClickFn', xIndex, options, params)
    //   }
    // });
  },
  destroyed () {
    off(window, 'resize', this.againCanvas);
  }
}
</script>
